<!--<script setup lang="ts">-->
<!--  import { ref } from 'vue';-->

<!--  const boxes = ref([-->
<!--    { label: '系统资源', highlighted: false },-->
<!--    { label: '我的资源', highlighted: false },-->
<!--    { label: '数据', highlighted: false },-->
<!--    { label: '结构', highlighted: false },-->
<!--  ]);-->

<!--  // 点击盒子时触发的方法-->
<!--  function highlightBox(index: number) {-->
<!--    // 清除所有盒子的高亮状态-->
<!--    boxes.value.forEach((box) => {-->
<!--      box.highlighted = false;-->
<!--    });-->
<!--    // 设置当前点击的盒子为高亮状态-->
<!--    boxes.value[index].highlighted = true;-->
<!--  }-->
<!--</script>-->

<!--<template>-->
<!--  <div class="header">-->
<!--    &lt;!&ndash; 添加四个可点击的 div &ndash;&gt;-->
<!--    <div v-for="(box, index) in boxes" :key="index" @click="highlightBox(index)">-->
<!--      <div class="box" :class="{ highlighted: box.highlighted }">-->
<!--        {{ box.label }}-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<style scoped>-->
<!--  .header {-->
<!--    height: 5vh;-->
<!--    width: 100vw;-->
<!--    background: #304156;-->
<!--    display: flex; /* 使用 flex 布局 */-->
<!--    align-items: center; /* 垂直居中 */-->
<!--    justify-content: flex-start; /* 水平居左 */-->
<!--  }-->

<!--  .box-container {-->
<!--    display: flex; /* 使用 flex 布局 */-->
<!--    white-space: nowrap; /* 防止换行 */-->
<!--    overflow: hidden; /* 如果盒子总宽度超出容器宽度，则隐藏溢出部分 */-->
<!--  }-->

<!--  .box {-->
<!--    margin-right: 5px; /* 盒子之间的间距 */-->
<!--    padding: 5px;-->
<!--    background-color: #304156;-->
<!--    border: none;-->
<!--    cursor: pointer;-->
<!--    flex-shrink: 0; /* 确保盒子不会缩小 */-->
<!--  }-->

<!--  .highlighted {-->
<!--    background-color: deepskyblue; /* 高亮颜色 */-->
<!--  }-->
<!--</style>-->
